<template>
  <div class="tags">
    <div
      class="tag"
      v-bind:key="item"
      v-for="(item, index) in funcs"
      @click="click(index)"
      :style="{
        border: index == select ? '#4e7bec 2px solid' : '',
      }"
    >
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  name: "myselect",
  methods: {
    click(idx) {
      this.$emit("select", idx);
      this.$data.select = idx;
    },
  },
  data() {
    return {
      select: 0,
      funcs: [
        "node12",
        "csharp",
        "dockerfile",
        "go",
        "java11",
        "java11-vert-x",
        "node",
        "node12-debian",
        "node14",
        "node16",
        "node17",
        "php7",
        "python",
        "python3",
        "python3-debian",
        "ruby",
      ],
    };
  },
};
</script>

<style scoped>
.tag {
  font-size: 18px;
  white-space: pre-line;
  background-color: white;
  border: 2px #eeeeee solid;
  padding: 10px 15px;
  color: grey;
  border-radius: 15px;
  word-break: break-all;
  margin-top: 6px;
  margin-right: 6px;
  cursor: pointer;
}
.tags {
  min-width: 800px;
  display: flex;
  flex-wrap: wrap;
  font-size: 30px;
  color: black;
}
</style>